<template>
  <div v-loading="loading">
    <div>
      <el-button
        v-if="entrustId"
        class="ml-0 pl-0 btn-long"
        type="text"
        @click="handlerView(entrustId)"
      >
        <i class="fa fa-fw fa-file-pdf-o text-muted mr-2 d-print-none"></i>
        委托合同.pdf
      </el-button>
    </div>
    <div>
      <el-button
        v-if="letterId"
        class="ml-0 pl-0 btn-long"
        type="text"
        @click="handlerView(letterId)"
      >
        <i class="fa fa-fw fa-file-pdf-o text-muted mr-2 d-print-none"></i>
        电子保函.pdf
      </el-button>
    </div>
    <div v-for="file of attachs" :key="file.url">
      <attach-item :attach-data="file"></attach-item>
    </div>

    <el-dialog
      top="30px"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handlerClose"
      :visible.sync="viewVisible"
    >
      <pdf-view :contract-id="docId" :view-mode="true" :query-id="relatedId"></pdf-view>
    </el-dialog>
  </div>
</template>
<script>
import AttachItem from '@/bank/components/attach/Item'
import { attachAdapter } from '@/bank/components/attach/index'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
import { mapGetters } from 'vuex'
export default {
  components: {
    AttachItem,
    PdfView,
  },
  props: {
    relatedId: String,
    entrustId: String,
    letterId: String,
  },
  data() {
    return {
      loading: false,
      tableName: 'datum_customer_attachment',
      attachs: [],
      docId: '',
      viewVisible: false,
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  watch: {
    relatedId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handlerClose() {
      this.viewVisible = false
    },
    handlerView(id) {
      this.docId = id
      this.viewVisible = true
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      if (!this.relatedId) return
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          { 'customer_related_id.eq': this.relatedId },
          { create_time: 'desc' }
        )
        .then(res => {
          this.attachs = (res?.data ?? []).map(attachAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.attach-title {
  font-size: 1.1rem;
  font-weight: bold;
}
</style>
